<template>
	<cl-page background-color="#fff">
		<cl-topbar :border="false" background-color="transparent" />

		<view class="page-login">
			<!-- Logo -->
			<view class="logo">
				<image src="/static/logo.png" mode="aspectFill" />
			</view>

			<div class="container">
				<!-- 登录方式 -->
				<view class="mode">
					<view>
						<view class="input">
							<cl-input style="width: 100%;" @change="changeUsername" @blur="changeUsername"
								placeholder="请填写账号" :font-size="30" :border="false" background-color="transparent" />
						</view>
						<view class="input">
							<cl-input style="width: 100%;" @change="changePassword" @blur="changePassword"
								type="password" placeholder="请填写密码" :font-size="30" :border="false"
								background-color="transparent" />
						</view>
					</view>

					<view class="submit" @click="submit">
						<cl-button background-color="#008c8c" color="#fff">登 录</cl-button>
					</view>
					<!-- <view @click="create" class="submit">
						<cl-button background-color="#008c8c" color="#fff">新 增</cl-button>
					</view> -->
				</view>
			</div>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { onReady } from "@dcloudio/uni-app";
	import { useCool } from "/@/cool";

	const { storage, } = useCool();
	const username = ref("");
	const password = ref("");

	const uniIdCo = uniCloud.importObject('uni-id-co')
	const userFn = uniCloud.importObject('cc_user')
	const changeUsername = (v : any) => {
		if (v?.target?.value) {
			username.value = v?.target?.value
		} else {
			username.value = v
		}
		uni.showToast({
			title: username.value,
			icon: "none"
		})

	}
	const changePassword = (v : any) => {
		if (v?.target?.value) {
			password.value = v?.target?.value
		} else {
			password.value = v
		}
	}
	const submit = async () => {
		setTimeout(async () => {
			if (!username.value) {
				uni.showToast({
					title: "请填写用户名！",
					icon: "none"

				})
				return
			}
			if (!password.value) {
				uni.showToast({
					title: "请填写密码！",
					icon: "none"
				})
				return
			}
			try {
				await uniIdCo.login({
					username: username.value,
					password: password.value
				})
				storage.set("code", username.value)
				await uni.showToast({
					title: "登陆成功"
				})
				setTimeout(() => {
					uni.switchTab({
						url: "/pages/index/list"
					})
				}, 300)
			} catch (e) {
				uni.showToast({
					title: "登陆失败"
				})
			}
		}, 300)
	}

	const create = async () => {
		await uniIdCo.registerAdmin({
			username: 'admin',
			password: 'admin123'
		})
		await uni.showToast({
			title: "用户创建成功"
		})
	}

	onReady(() => { });
</script>

<style lang="scss" scoped>
	.page-login {
		.logo {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding-top: 20%;

			image {
				display: block;
				height: 150rpx;
				width: 150rpx;
				border-radius: 24rpx;
				margin-bottom: 30rpx;
				box-shadow: 0 25rpx 30rpx -25rpx #666666;
			}

			text {
				font-size: 36rpx;
				font-weight: bold;
				letter-spacing: 1rpx;
				color: #333;
			}
		}

		.container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 80rpx;

			.mode {
				width: 90%;
			}

			.input {
				display: flex;
				align-items: center;
				background-color: #eeeeee;
				border-radius: $cl-border-radius;
				height: 80rpx;
				margin-bottom: 30rpx;
				font-size: 30rpx;
				width: 100%;

				text {
					display: inline-block;
					padding: 0 40rpx;
					border-right: $cl-border-width solid $cl-border-color;
					font-weight: bold;
					color: #404040;
				}

				input {
					height: 100%;
					flex: 1;
					padding: 0 30rpx;
				}
			}

			.code {
				width: 100%;
				margin-bottom: 30rpx;
			}

			.submit {
				width: 100%;
				height: 80rpx;
				margin-top: 60rpx;

				::v-deep .cl-button {
					font-size: 30rpx;
					width: 100% !important;
					height: 100% !important;
				}
			}
		}
	}
</style>